<template>
	<div class="homepage">
		<!-- 搜索框 -->
		<router-link to="/search">
			<van-search shape="round" background="#07c160" placeholder="搜索" />
		</router-link>

		<!-- 可拖动导航条 -->
		<van-tabs v-model="active" @click="switchTab">
			<van-tab v-for="item in cate" :key="item._id" :title="item.name">
			</van-tab>
		</van-tabs>

		<!-- 懒加载 -->
		<div class="homepage-image" v-for="(item,index) in articleList" :key="item._id">
			<p>{{item.title}}</p>
			<div :class="{hide:item.poster_type==1,rightImg:item.poster_type==2,acticleImg:item.poster_type==3}">
				<img v-for="img in item.imageSrc" :src="img" />
			</div>

			<p>{{item.author}} 评论</p>
		</div>

	</div>
</template>

<script>
	// 封装成组件的写法
	import {
		getCateList,
		getArticleList
	} from '../api/home.js'

	export default {
		data() {
			return {
				active: 0,
				cate: [], //存放分类数据
				active_cate_id: '', // 当前被选中的那一项的分类id
				articleList: [], //文章列表
			}
		},
		mounted() {
			this.getCate()
			// this.getCateList()
		},
		methods: {
			switchTab() {
				this.active_cate_id = this.cate[this.active]._id; // 获取到目前高亮的栏目的id 
				this.getArtList();
				// this.getArticleList();
			},
			// getCateList(){
			// 	this.$http.post('/api/get_cate_list').then(res=>{
			// 		console.log(res)
			// 		// 对cate进行了更改  vue视图更新
			// 		this.cate=res.data.data
			// 		// 拿到分类数据后  去取第一个栏目的id
			// 		this.active_cate_id=this.cate[this.active]._id;
			// 		this.getArticleList();
			// 	})
			// },
			// // 获取文章列表
			// getArticleList(){
			// 	this.$http.post('/api/get_article_list',{
			// 		cate_id:this.active_cate_id
			// 	}).then(res=>{
			// 		console.log(res)
			// 		this.articleList=res.data.data
			// 	})
			// }

			getCate() {
				getCateList().then(res => {
					console.log(res)
					// 对cate进行了更改  vue视图更新
					this.cate = res.data.data

					// 拿到分类数据后  去取第一个栏目的id

					this.active_cate_id = this.cate[this.active]._id; // 获取到目前高亮的栏目的id
					this.getArtList();
				})
			},
			// 获取文章列表
			getArtList() {
				let {
					active_cate_id
				} = this;
				getArticleList({
					cate_id: active_cate_id
				}).then(res => {
					console.log(res)
					this.articleList = res.data.data
				})
			}

		}
	}
</script>

<style lang="less">
	a {
		color: #000;
	}

	/* // .rightImg{
		// 	width: 100%;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	flex-wrap: nowrap;
		// }
		// .acticleImg{
		// 	width: 49%;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	flex-wrap: nowrap;
		// } */
	.homepage p {
		margin: 5px 0;
	}

	.homepage-image:last-child {
		margin-bottom: 80px;
	}

	.homepage .van-tabs__line {
		background-color: @color;
		margin-bottom: 3px;
		width: 30px;
	}

	.homepage .van-tabs__wrap--scrollable {
		border-bottom: 1px solid #ddd;
	}

	.homepage .van-tabs__wrap--scrollable .van-tab {
		border-left: 1px solid #ddd;
	}

	.homepage .van-tabs__nav--line.van-tabs__nav--complete {
		padding-left: 0;
	}

	.homepage .van-search__content--round {
		background-color: #66d79d;
	}

	.homepage .van-field__body input {
		color: #fff;
	}

	/* 更改搜索框内  placeholder的颜色 */
	.homepage .van-field__body input:-moz-placeholder,
	.homepage textarea:-moz-placeholder {
		color: #fff;
	}

	.homepage .van-field__body input:-ms-input-placeholder,
	.homepage textarea:-ms-input-placeholder {
		color: #fff;
	}

	.homepage .van-field__body input::-webkit-input-placeholder,
	.homepage textarea::-webkit-input-placeholder {
		color: #fff;
	}

	.homepage .van-field__left-icon .van-icon,
	.homepage .van-field__right-icon .van-icon {
		color: #fff;
	}

	.homepage-image {
		border-bottom: 1px solid #ddd;
	}

	.homepage-image img {
		width: 100%;
	}

	.homepage-image p,
	.homepage-image p:last-child {
		font-size: 14px;
		text-align: left;
		margin-left: 20px;

		height: 20px;
		width: 90%;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.homepage-image p:last-child {
		font-size: 12px;
		height: 15px;
		line-height: 15px;
		color: #7a7a7a;
	}
</style>
